<template>
    <el-container ref="homePage">
        <!-- 头部 -->
        <!-- <el-header class="header" v-if=" headBool!='/sharee'">
          <header-box></header-box>
        </el-header> -->
        <div class="btns" @click="drawer = true">
            <div class="lineGroup">
                <span class="lines" v-for="(item, index) in 3" :key="index"></span>
            </div>
        </div>
        <el-container id="leftBiggerMenu">
            <el-aside
                    id="leftMenu"
                    :class="bools == false ? 'avtive1' : ''"
                    style="width: 200px"
            >
                <el-menu
                        :collapse="isCollapse"
                        unique-opened
                        :default-active="active"
                        @select="handleOpen"
                        @open="handleOpen2"
                        class="el-menu-vertical-demo"
                        background-color="#3B4A66"
                        text-color="#a7b1c2"
                        active-text-color="#55678A"
                        style="height: 100vh"
                >
                    <div style="color: white;
                                    height: 50px;
                        line-height: 50px;
                        text-aligin: center;
                        font-size: 18px;
                        text-indent: 20px;
                        cursor: pointer;"
                        @click="backHome"
                        >
                        IMAGINE_WEB
                    </div>
                    <template v-for="item in listData">
                        <el-submenu
                                v-if="item.children && item.children.length > 0"
                                :key="item.id"
                                :index="item.id"
                        >
                            <template slot="title">
                                <div @click="updateType">
                                    <span>{{ item.name }}</span>
                                </div>
                            </template>
                            <template v-for="items in item.children">
                                <el-submenu
                                        v-if="items.children && items.children.length > 0"
                                        :key="items.href"
                                        :index="items.href"
                                >
                                    <template slot="title">
                                        <span>{{ items.name }}</span>
                                    </template>
                                    <template v-for="itemData in items.children">
                                        <el-submenu
                                                v-if="itemData.children && itemData.children.length > 0"
                                                :key="itemData.href"
                                                :index="itemData.href"
                                        >
                                            <template slot="title">
                                                <span>{{ itemData.name }}</span>
                                            </template>
                                        </el-submenu>
                                        <el-menu-item
                                                v-else
                                                :key="itemData.href"
                                                :index="itemData.href"
                                        >
                                            <span slot="title">{{ itemData.name }}</span>
                                        </el-menu-item>
                                    </template>
                                </el-submenu>
                                <el-menu-item v-else :key="items.href" :index="items.href">
                                    <span slot="title">{{ items.name }}</span>
                                </el-menu-item>
                            </template>
                        </el-submenu>
                    </template>
                </el-menu>
                <!-- <div class="stretch" v-if="bools == true" @click="handStretch"></div> -->
            </el-aside>

            <el-drawer
                    v-if="false"
                    style="overflow: scroll !important"
                    class="aside1"
                    title="管理系统"
                    :visible.sync="drawer"
                    :direction="direction"
                    :before-close="handleClose"
            >
                <el-menu
                        unique-opened
                        :default-active="active"
                        @select="handleOpen"
                        class="el-menu-vertical-demo"
                        background-color="#545c64"
                        text-color="#a7b1c2"
                        active-text-color="#FF0000"
                >
                    <el-submenu
                            v-for="(item, index) in listData"
                            :key="index.href"
                            :index="index"
                    >
                        <template slot="title">
                            <span>{{ item.name }}</span>
                        </template>
                        <el-menu-item-group
                                v-for="(item1, index1) in item.children"
                                :key="index1"
                        >
                            <el-menu-item
                                    :index="item1.href"
                                    v-if="item1.name != '结算信息'"
                                    @click="handclicks(item1.children, item1.name)"
                            >{{ item1.name }}
                            </el-menu-item
                            >
                            <!-- 这里开始写 -->
                            <div v-if="item1.children.length > 0">
                                <!-- <el-menu-group> -->
                                <!-- <template slot="title"></template> -->
                                <el-submenu>
                                    <template slot="title" @click="handClick">
                                        <span>{{ item1.name }}</span>
                                    </template>
                                    <el-menu-item
                                            @click="dian(index4, item4.name, item4.href)"
                                            v-for="(item4, index4) in item1.children"
                                            :key="index4"
                                    >{{ item4.name }}
                                    </el-menu-item
                                    >
                                </el-submenu>
                                <!-- </el-menu-group> -->
                            </div>
                            <!-- 这里结束写 -->
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-drawer>
            <el-main style="background: white; margin-bottom: 40px" class="mains">
                <el-header
                        style="height: 50px; padding-left: 0 !important"
                        class="header"
                        v-if="headBool != '/sharee'"
                >
                    <header-box @fatherMethod="fatherMethod"></header-box>
                </el-header>
                <keep-alive>
                    <router-view v-if="active == 'teamRewardfrind'"></router-view>
                </keep-alive>
                <keep-alive>
                    <router-view v-if="active == 'frindsestablish'"></router-view>
                </keep-alive>
                <keep-alive>
                    <router-view v-if="active == 'createActive'"></router-view>
                </keep-alive>
                <router-view
                        v-if="
            active != 'createActive' &&
            active != 'frindsestablish' &&
            active != 'teamRewardfrind'
          "
                ></router-view>
            </el-main>
            <div class="footTop"></div>
            <div class="footer" :class="bools == false ? 'active2' : ''">
                京ICP备10215230号-3 &nbsp;&nbsp;&nbsp;&nbsp;京公网安备 11010802023150号
            </div>
        </el-container>
        <!-- <div class="setOpen" v-if="bools == false" @click="handHui"></div> -->
    </el-container>
</template>

<script>
    import headerBox from "../header.vue";
    import axios from "axios";
    import {Littlehow} from "../../assets/js/util";
    import WEBAPI from "../../assets/js/base";
    import Utils from "../../assets/js/tree";
    import BUS from "../../assets/js/bus"

    var quanxian = null;
    export default {
        name: "homePage",
        components: {
            headerBox,
        },
        created() {

            this.list();
            // console.log(this.$store.state.messList)
            // this.listData=this.$store.state.messList

            this.headBool = this.$route.path;
            this.bool = sessionStorage.getItem("bool");
            // axios
            //   .post("/api/sys/menu/nav", { isShow: 0 })
            //   .then(res => {
            //     // alert("获取数据成功");
            //     // console.log(res);
            //     let listData1 = res.data.data;
            //     //下面获取到的数据是
            //     // console.log("下面获取到的数据是");
            //     listData1.map(item => {
            //       item.lable = item.name;
            //       item.value = item.id;
            //     });
            //     if (listData1) {
            //       var format = {
            //         id: "id", //菜单编号，作为树形查找id
            //         root: -1, //顶层节点的parentId是root
            //         pid: "parentId", //父节点标识字段为parentId
            //         child: "children", //构造出的树形子节点数组名为children
            //         sort: { field: "sortNo", direct: 1 }
            //       }; //排序字段为sortNo，且正序
            //       var result = Littlehow.tree.format(listData1, format);
            //       this.listData = result[0].children;
            //       console.log("下面是转换后的数据ssssssdfsgdfasdfsdfsdfassss");
            //       console.log(this.listData);
            //       //下面是左侧列表的排序
            //       for (let i = 0; i < this.listData.length; i++) {
            //         for (let j = 0; j < this.listData.length - 1 - i; j++) {
            //           if (this.listData[j].sort > this.listData[j + 1].sort) {
            //             var temp = this.listData[j + 1];
            //             this.listData[j + 1] = this.listData[j];
            //             this.listData[j] = temp;
            //           }
            //         }
            //       }
            //       return this.listData;
            //     }
            //   })
            //   .catch(err => {
            //     // alert("失败")
            //     console.log(err);
            //   });
            axios
                .post("/api/sys/menu/nav", {})
                .then((res) => {
                    // console.log("数据是")
                    console.log(res.data.permission);
                    var btnGroup = res.data.permission;
                    btnGroup = JSON.stringify(btnGroup);
                    sessionStorage.setItem("btnGroup", btnGroup);
                    // var timer = new data
                })
                .catch((err) => {
                    // alert("数据是")
                    console.log(err);
                });

            this.active = this.$route.name;
            //    axios.post("/api/sys/menu/nav",{})
            // .then(res=>{
            //   // console.log("数据是")
            //   console.log(res.data.permission)
            //   var btnGroup = res.data.permission
            //   btnGroup = JSON.stringify(btnGroup)
            //   // alert("存入数据")
            //   sessionStorage.setItem("btnGroup",btnGroup)
            //   // var timer = new data
            // }).catch(err=>{
            //   // alert("数据是")
            //   console.log(err)
            // })
        },
        data() {
            return {
                isCollapse: false,
                bool: "",
                //手机显示的样式
                active: "",
                drawer: false,
                direction: "rtl",
                phone: "",
                levelList: [],
                msgFormSon: "this is msg",
                clientHeight: "",
                showData: false,
                // 这里是权限的数据
                listData: [],
                headBool: "",
                bools: true, //控制侧边栏的展开收缩
            };
        },
        watch: {
            $route(to, from) {
                console.log(to);

                this.active = to.name;
                this.getBreadcrumb();
                this.showData =
                    to.path == "/"
                        ? false
                        : to.path == "/sharee"
                        ? false
                        : to.path == "/download"
                            ? false
                            : true;
                if (to.path == "/sharee" || to.path == "/download") {
                    return;
                }
                if (
                    localStorage.getItem("token") == "" ||
                    localStorage.getItem("token") == undefined
                ) {
                    this.$router.push("/");
                    localStorage.clear();
                } else {
                    // this.$axios.get('/getMenu', )   //记得增加ajax
                }
            },
            // 如果 `clientHeight` 发生改变，这个函数就会运行
            clientHeight: function () {
                this.changeFixed(this.clientHeight);
            },
        },
        mounted() {
            Utils.$on("demo", () => {
                this.list();
                5;
            });
            console.log(this.$route);
            this.btitle = this.$route.params.title;
            this.phone = localStorage.getItem("phone");
            this.tian = localStorage.getItem("tian");
            this.getBreadcrumb();

            // 获取浏览器可视区域高度
            this.clientHeight = `${document.documentElement.clientHeight}`;
            //document.body.clientWidth;
            //console.log(self.clientHeight);
            window.onresize = function temp() {
                this.clientHeight = `${document.documentElement.clientHeight}`;
            };
        },
        methods: {
            updateType() {
                let officeUid = localStorage.getItem("uid")
                axios.post("api/office/getAuthStatus", {officeUid}).then(res => {
                    console.log("使用信息")
                    localStorage.setItem("authenticationStatus", res.data.data)
                    BUS.$emit("updataInfo")
                }).catch(err => {
                    console.log(err)
                })
            },
            handleOpen2(key, keyPath) {
                console.log(key, keyPath);
                // if (key == "1") {
                //   this.$router.push({
                //     name: "mechanismaa",
                //   });
                // }
            },
            list() {
                axios
                    .post("/menu/getUserMenu", {isShow: 0})
                    .then((res) => {
                        // alert("获取数据成功");
                        // console.log(res);
                        let listData1 = res.data.data;
                        //下面获取到的数据是
                        // console.log("下面获取到的数据是");
                        listData1.map((item) => {
                            item.lable = item.name;
                            item.value = item.id;
                        });
                        if (listData1) {
                            var format = {
                                id: "id", //菜单编号，作为树形查找id
                                root: -1, //顶层节点的parentId是root
                                pid: "parentId", //父节点标识字段为parentId
                                child: "children", //构造出的树形子节点数组名为children
                                sort: {field: "sortNo", direct: 1},
                            }; //排序字段为sortNo，且正序
                            var result = Littlehow.tree.format(listData1, format);
                            this.listData = result[0].children;
                            //下面是左侧列表的排序
                            for (let i = 0; i < this.listData.length; i++) {
                                for (let j = 0; j < this.listData.length - 1 - i; j++) {
                                    if (this.listData[j].sort > this.listData[j + 1].sort) {
                                        var temp = this.listData[j + 1];
                                        this.listData[j + 1] = this.listData[j];
                                        this.listData[j] = temp;
                                    }
                                }
                            }
                            return this.listData;
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            },
            fatherMethod() {
                console.log("调用了");
                this.bools = !this.bools;
            },

            backHome() {
                this.$router.push({
                    path: "/",
                });
            },

            // 侧边栏收缩
            handStretch() {
                console.log("发生了点击");
                this.bools = false;
                console.log(this.bools);
            },
            handHui() {
                this.bools = true;
            },
            //关闭侧边栏
            handleClose(done) {
                this.$confirm("确认关闭？")
                    .then((_) => {
                        done();
                    })
                    .catch((_) => {
                    });
            },

            handClick() {
                return;
            },
            handclicks(item, name) {
                var that = this;
                // alert(JSON.stringify(item))
                this.$store.commit("getBtgGroup", item);
                console.log("itemname是下面的");
                WEBAPI.WEBAPI.getData(function (datas) {
                    console.log(datas);
                    for (let i = 0; i < datas.length; i++) {
                        if (datas[i].name == name) {
                            // alert(datas[i].name)
                            quanxian = datas[i].btnArr;
                            // alert(quanxian)
                            let preservation = JSON.stringify(quanxian);
                            // sessionStorage.setItem("btnGroup",preservation)
                            // that.$store.commit("getBtgGroup",quanxian)
                            // break;
                        }
                    }
                }).catch((err) => {
                });
                // console.log(name)
            },
            // 排序算法
            // bubbleSort(arr) {
            // var len = arr.length;
            //   for (var i = 0; i < len; i++) {
            //     for (var j = 0; j < len - 1 - i; j++) {
            //         if (arr[j] > arr[j+1]) {        //相邻元素两两对比
            //             var temp = arr[j+1];        //元素交换
            //             arr[j+1] = arr[j];
            //             arr[j] = temp;
            //         }
            //     }
            //   }
            //   return arr;
            // },
            handleOpen(key) {
                console.log("下面是拿到的数据");
                console.log(key);
                // this.$router.go(0)
                // return;
                if (key == "brandManage") {
                    this.$router.push({
                        path: `/homePage/bran`,
                    });
                } else {
                    this.$router.push({
                        path: `/homePage/${key}`,
                    });
                }
            },
            // 面包屑+动态路由
            getBreadcrumb() {
                let matched = this.$route.matched.filter((item) => item.name);
                const first = matched[0];
                if (
                    first &&
                    first.name.trim().toLocaleLowerCase() !== "homePage".toLocaleLowerCase()
                ) {
                    matched = [
                        {path: "/campaignManagement", meta: {title: "活动管理"}},
                    ].concat(matched);
                }
                this.levelList = matched;
            },
            getMsgFormSon(data) {
                this.msgFormSon = data;
            },
            changeFixed(clientHeight) {
                // this.$refs.homePage.$el.style.height = clientHeight - 20 + "px";
                // this.$refs.homePage.$el.style.height = clientHeight  + "px";
            },
            dian(index, name, ads) {
                console.log(name);
                console.log(ads);
                var name = name;
                this.$router.push({
                    path: `/homePage/${ads}`,
                });
            },
        },
        computed: {
            defaultActive() {
                return "/" + this.$route.path.split("/").reverse()[0];
            },
            active() {
                console.log(111);
                return this.$router.push.replace("/").reverse()[0];
            },
            clicks() {
                alert("111")
            }
        },
    };
</script>
<style scoped>
    .foot {
        height: 50px;
        background: #c33;
    }

    .el-main {
        display: block;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
        box-sizing: border-box;
        padding: 0 !important;
    }

    .el-menu {
        height: calc(100vh - 60px);
        position: fixed;
        overflow: auto;
        float: left;
        width: 200px;
    }

    .el-menu::-webkit-scrollbar {
        width: 4px;
    }

    .el-menu::-webkit-scrollbar-track {
        background: rgb(239, 239, 239);
        border-radius: 2px;
    }

    .el-menu::-webkit-scrollbar-thumb {
        background: #409eff;
    }

    .el-container {
        background: #f5f7fa;
    }

    .el-container >>> #leftMenu {
        /* background-color: rgb(84, 92, 100); */
        transition: 0.3s;
        position: relative;
        width: 200px;
    }

    .el-container.is-vertical >>> .el-header {
        padding: 0;
    }

    .el-submenu >>> .el-submenu__title * {
        color: #fff;
        font-size: 15px !important;
    }

    /deep/ .el-submenu__title {
        line-height: 50px;
        height: 50px;
        opacity: 0.9;
    }

    li >>> .el-menu-item {
        color: #fff !important;
    }

    element.style {
        padding-left: 20px;
        color: rgb(90, 87, 87);
        background-color: rgb(228, 229, 230);
    }

    .el-menu-item.is-active {
        background-color: #55678a !important;
        color: #409eff !important;
        padding-left: -3px;
        border-left: 3px solid #409eff !important;
        box-sizing: border-box;
        /* padding-left: 37px !important; */
    }

    .el-submenu .el-menu-item {
        min-width: 100px;
        opacity: 0.9;
    }

    .headbox6_10[data-v-29e8c3c6] {
        z-index: 1 !important;
    }

    .lineGroup {
        margin: 0 auto;
        width: 20px;
        margin-left: 6px;
        margin-top: 10px;
    }

    .btns {
        display: none;
    }

    .aside1 {
        display: none;
    }

    /deep/ .el-drawer.rtl {
        margin-top: 60px;
        overflow: scroll !important;
    }

    .lines {
        width: 20px;
        height: 1px;
        background: blue;
        display: block;
        margin: 0 auto;
        margin-bottom: 5px;
    }

    .btns {
        width: 35px;
        height: 35px;
        background: white;
        text-align: center;
        padding-right: 20px !important;
        box-sizing: border-box;
        border: 1px solid #ccc;
        border-radius: 3px;
        position: fixed;
        bottom: 15%;
        right: 20px;
        z-index: 9999999;
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }

    .el-menu-vertical-demo {
        z-index: 2;
    }

    .avtive1 {
        transform: translateX(-200px);
        width: 0 !important;
    }

    .stretch,
    .setOpen {
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        left: 199px;
        z-index: 99999999999999;
        width: 30px;
        height: 60px;
        /* background: url("../../assets/images/close1.png") no-repeat left center; */
        cursor: pointer;
    }

    .setOpen {
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        width: 30px;
        height: 60px;
        /* background: url("../../assets/images/opens.png") no-repeat left center; */
        cursor: pointer;
    }

    .footer {
        background: #fff;
        position: fixed;
        bottom: 0;
        right: 0;
        /* z-index: 99999; */
        height: 40px;
        width: calc(100% - 200px);
        line-height: 40px;
        text-align: center;
        border-top: 1px solid #d8dce6;
    }

    .active2 {
        width: 100% !important;
    }

    .mains {
        position: relative;
    }

    .footTop {
        position: fixed;
        bottom: 40px;
        width: 100%;
        background: #ccc;
        left: 0;
    }

    @media screen and (max-width: 420px) {
        #leftMenu {
            display: none;
        }

        .btns {
            display: none;
        }

        .aside1 {
            display: block;
        }
    }
</style>
